<template>
  <div class="mysong">
    <h1>
      我的专辑
      <span class="number">({{zj.length}})</span>
    </h1>
    <ul>
      <li
        v-for="(item, index) in zj"
        :key="index"
        @click="$router.push('/albuminfo/'+item.id)"
      >
        <img :src="item.img" />
        <span class="name">{{item.name}}</span>
        <span class="nickname">{{item.songname}}</span>
        <span class="count">{{item.num}}首</span>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: { ...mapState(["zj"]) },
};
</script>
<style lang="less" scoped>
.mysong {
  h1 {
    font-size: 20px;
    font-weight: 400;
    padding: 10px 30px;
    margin-top: 20px;
    border-bottom: 1px solid #e1e1e2;
    span {
      font-size: 13px;
      margin-left: 10px;
    }
  }
  ul {
    li {
      height: 60px;
      padding: 10px 30px;
      line-height: 40px;
      font-size: 13px;
      cursor: pointer;
      &:nth-child(2n-1) {
        background-color: #f5f5f7;
      }
      &:hover {
        background-color: #ebeced;
      }
      color: #888;
      img {
        height: 40px;
        width: 40px;
        border: 1px solid #e1e1e2;
        vertical-align: top;
        margin-right: 20px;
      }
      span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .name {
        width: 430px;
      }
      .nickname {
        width: 170px;
      }
      .count {
        width: 50px;
        margin-left: 15px;
      }
    }
  }
}
</style>
